<template>
  <div>
    <Card class="mt16" :title="$t('备件采购记录')">
      <Button v-if="showAddBtn" type="primary" class="mb16" @click="addItem">{{ $t('添加备件采购') }}</Button>
      <div class="tableContent">
        <Table :columns="purchaseColumns" :data="purchaseDataSource">
          <template slot-scope="{ row,index }" slot="action">
            <span class="operationBtn" @click="removeItem(row, index)">{{ $t('删除') }}</span>
          </template>
          <template slot-scope="{ row }" slot="backupStatus">
            <div class="backupStatus"
              :class="{ backupStatus1: row.backupStatus == 1, backupStatus2: row.backupStatus == 2, backupStatus3: row.backupStatus == 3 }">
              <span></span>{{ backupStatusList[row.backupStatus] }}
            </div>
          </template>
        </Table>
      </div>
    </Card>
    <addSpareParts ref="addSpareParts" @change="addSparePartsChange" :list.sync="purchaseDataSource" />
  </div>
</template>

<script>
import addSpareParts from "@/views/fault/workOrderHall/modules/addSpareParts";
export default {
  name: "sparePartsPurchasingRecords",
  components: { addSpareParts },
  data() {
    return {
      purchaseDataSource: [],
      showAddBtn: true,
      backupStatusList: { 1: this.$t("待采购"), 2: this.$t("采购中"), 3: this.$t("已到货") },
      purchaseColumns: [
        {
          title: this.$t('备件料号'),
          key: 'materielNo',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('规格型号'),
          key: 'specification',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('备件名称'),
          key: 'goodsName',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('SAP申请单号'),
          key: 'purchaseOrderNo',
          align: 'center',
          minWidth: 150
        },
        {
          title: this.$t('所需数量'),
          key: 'amountOfNeed',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('采购数量'),
          key: 'amountOfPurchase',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('库存数量'),
          key: 'amountOfStorage',
          align: 'center',
          width: 120
        },
        {
          title: this.$t('备件采购状态'),
          key: 'backupStatus',
          align: 'center',
          minWidth: 120,
          slot: "backupStatus"
        },
        // {
        //   title: this.$t('备件单价（元）'),
        //   key: 'purchasePrice',
        //   align: 'center',
        //   width:160
        // },
        {
          title: this.$t('备注'),
          key: 'comment',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('到位日期'),
          key: 'arrivalDate',
          align: 'center',
          minWidth: 120
        },
        {
          title: this.$t('操作'),
          key: 'gradeStr',
          align: 'center',
          slot: "action",
          fixed: "right",
          width: 120
        },
      ],
    }
  },
  methods: {
    setData(maintainBackupVOS) {
      this.purchaseDataSource = maintainBackupVOS
      this.showAddBtn = false
      this.purchaseColumns.splice(this.purchaseColumns.length - 1, 1)
    },
    addSparePartsChange(row) {
      this.purchaseDataSource.push(row)
    },
    removeItem(row, index) {
      this.purchaseDataSource.splice(index, 1)
    },
    addItem() {
      this.$refs.addSpareParts.show();
    }
  }
}
</script>

<style lang="scss" scoped>
.backupStatus {
  span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: inherit;
  }

  &.backupStatus1 {
    color: red;

    span {
      background: red;
    }
  }

  &.backupStatus2 {
    color: #FFBF00;

    span {
      background: #FFBF00;
    }
  }

  &.backupStatus3 {
    color: green;

    span {
      background: green;
    }
  }
}</style>
